<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useEchart } from '../composables/useEchart'
import * as echarts from 'echarts'

const elRef = ref<HTMLElement | null>(null)

const getOption = (): echarts.EChartsOption => {
	// 主色渐变（橙色系）
	const orangeLinear = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
		{
			offset: 0.01,
			color: '#FFA51E'
		},
		{
			offset: 0.57,
			color: '#FF8724'
		},
		{
			offset: 0.85,
			color: '#FB6142'
		},
		{
			offset: 0.99,
			color: '#FB4242'
		}
	])

	// 蓝色柱条渐变
	const blueBar = new echarts.graphic.LinearGradient(0, 0, 0, 1, [
		{
			offset: 0,
			color: '#268FFF'
		},
		{
			offset: 1,
			color: '#21F8FF'
		}
	])

	const x = ['郑州体育', '洛阳体育', '南阳体育', '开封体育', '许昌体育', '信阳体育', '周口体育', '新乡体育', '焦作体育']
	// 模拟数据（视觉拟合设计稿形态）
	const passCount = [12, 42, 55, 31, 56, 18, 50, 15, 44].map(v => v * 1000)
	const percent = [20, 60, 80, 40, 100, 35, 90, 30, 85]

	return {
		grid: {
			left: 40,
			right: 40,
			top: 60,
			bottom: 40
		},
		tooltip: {
			trigger: 'axis',
			valueFormatter: (value: any) => {
				const val = Array.isArray(value) ? value[0] : value
				if (typeof val === 'number') {
					return Number.isInteger(val) ? val.toLocaleString() : `${val}%`
				}
				return String(val)
			}
		},
		dataZoom: [
			{
				type: 'inside',
				realtime: true,
				start: 0,
				end: 100
			},
			{
				type: 'slider',
				realtime: true,
				height: 12,
				bottom: 8
			}
		],
		xAxis: [
			{
				type: 'category',
				data: x,
				axisTick: { show: false },
				axisLine: { lineStyle: { color: '#E5E6EB' } },
				axisLabel: { color: '#86909C' }
			},
			{
				type: 'category',
				data: x,
				axisLabel: { show: false },
				axisTick: { show: false },
				axisLine: { show: false }
			}
		],
		yAxis: [
			{
				type: 'value',
				axisLine: { show: false },
				splitLine: { lineStyle: { color: '#F2F3F5' } },
				axisLabel: {
					color: '#86909C',
					formatter: (val: number) => (val >= 1000 ? `${(val / 1000).toFixed(0)}k` : `${val}`)
				}
			},
			{
				type: 'value',
				position: 'right',
				axisLine: { show: false },
				splitLine: { show: false },
				axisLabel: {
					color: '#86909C',
					formatter: (val: number) => `${val}%`
				},
				min: 0,
				max: 100
			}
		],
		legend: { show: false },
		series: [
			{
				name: '通过人数',
				type: 'bar',
				xAxisIndex: 0,
				yAxisIndex: 0,
				data: passCount,
				itemStyle: {
					color: blueBar,
					borderRadius: [100, 100, 0, 0]
				},
				barWidth: 17
			},
			{
				name: '通过占比',
				type: 'line',
				xAxisIndex: 0,
				yAxisIndex: 1,
				data: percent,
				smooth: true,
				symbol: 'circle',
				symbolSize: 6,
				itemStyle: {
					color: '#FF9E1F',
					shadowBlur: 8,
					shadowColor: 'rgba(37,155,255,0.6)'
				},
				lineStyle: {
					width: 3,
					color: orangeLinear
				},
				areaStyle: {
					color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
						{
							offset: 0,
							color: 'rgba(255,165,30,0.15)'
						},
						{
							offset: 1,
							color: 'rgba(255,165,30,0.00)'
						}
					])
				}
			}
		]
	}
}

const { init } = useEchart(elRef, getOption)

onMounted(() => init())
</script>

<template>
	<div class="w-full h-[440px] bg-white rounded-[4px] p-[20px]">
		<div class="text-primary text-[16px] leading-[24px] mb-[12px]">各单位注册通过人数及占比统计</div>
		<div
			ref="elRef"
			class="w-full h-[364px]"
		/>
	</div>
</template>
